﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<script runat="server">

</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Advance Search
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    How to use <span>trigger('filter')</span> to make an advance search
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <style type="text/css">
         #controls table
        {
            margin-top: 10px;
            margin-bottom: 10px;
            border-collapse: collapse;
        }
        #controls table th
        {
            text-align: left;
            padding-right: 10px;
        }
        #controls
        {
            margin-top: 30px;
            margin-bottom: 30px;
        }
        
        #result
        {
            padding: 10px;
            border: 3px solid #888;
        }
        
       
    </style>
    <div id="demo">
        <div id="controls">
            <table>
                <tr>
                    <th>
                        Name like:
                    </th>
                    <td>
                        <input id="name" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        AND
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <th>
                        DVD available:
                    </th>
                    <td>
                        <input id="dvd" type="checkbox" checked="checked" />
                    </td>
                </tr>
            </table>
            <input type="button" value="Search" onclick="adSearch()" />
        </div>
        <div id="result">
            <div class="PaginationContainer">
            </div>
            <br style="clear: both;" />
            <div id="Container">
            </div>
            <textarea id="template" style="display: none">
                <table>
                    <tr>
                        <th>
                        </th>
                        <th>
                        </th>
                        <th style="width: 400px;">
                            Name
                        </th>
                        <th>
                            DVD Available
                        </th>
                    </tr>
                    {#foreach $T as d}
                    <tr class="{#cycle values=['odd','even']}">
                        <td>
                            {$T.d$index + 1}
                        </td>
                        <td>
                            <img style="height: 75px;" src="{$T.d.__metadata.media_src}" />
                        </td>
                        <td>
                            {$T.d.Name}
                        </td>
                        <td>
                            {$T.d.Dvd.Available ? 'Y' : 'N'}
                        </td>
                    </tr>
                    {#/for}
                </table>
            </textarea>
            <div class="PaginationContainer">
            </div>
            <br style="clear: both;" />
        </div>
    </div>
    <link rel="stylesheet" href="../css/checkbox.css" />
    <script type="text/javascript" src="../js/ui.checkbox.js"></script>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/databind.js"></script>
    <script type="text/javascript" src="../jQueryClient/jTemplates.js"></script>
    <script type="text/javascript" src="../jQueryClient/pagination.js"></script>
    <link rel="stylesheet" href="../css/pagination.css" />
    
    <script type="text/javascript">
        $(function () {
            $("input[type='checkbox']").checkBox();
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    //bind data to the "repeater"
                    $("#Container").dataBind($("#template").text(), data.d, {
                        page_size: 4,
                        //handle the page changed event
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color: Red;">No data in the data source.</span>'
                    });
                }
            });
        })

        function adSearch() {
            $("#Container").trigger('filter', function (data) {
                var rg = new RegExp($('#name').val(), 'i');
                return data.Name.search(rg) != -1 && data.Dvd.Available == $('#dvd').is(":checked");
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $.doPostback("http://odata.netflix.com/catalog/Titles?$format=json&$top=50&$callback=callback", {}, {
                ajax: {	
                    dataType : "jsonp",
                    jsonpCallback: "callback"
                },
                callback: function (data) {
                    //bind data to the "repeater"
                    $("#Container").dataBind($("#template").text(), data.d, {
                        page_size: 4,
                        //handle the page changed event
                        page_container: '.PaginationContainer',
                        empty_text: '<span style="color: Red;">No data in the data source.</span>'
                    });
                }
            });
        })

        function adSearch() {
            $("#Container").trigger('filter', function (data) {
                var rg = new RegExp($('#name').val(), 'i');
                return data.Name.search(rg) != -1 && data.Dvd.Available == $('#dvd').is(":checked");
            });
        }
</pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols">
        &lt;div id=&quot;controls&quot;&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;th&gt;
                        Name like:
                    &lt;/th&gt;
                    &lt;td&gt;
                        &lt;input id=&quot;name&quot; type=&quot;text&quot; /&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        AND
                    &lt;/td&gt;
                    &lt;td&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                    &lt;th&gt;
                        DVD available:
                    &lt;/th&gt;
                    &lt;td&gt;
                        &lt;input id=&quot;dvd&quot; type=&quot;checkbox&quot; checked=&quot;checked&quot; /&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;input type=&quot;button&quot; value=&quot;Search&quot; onclick=&quot;adSearch()&quot; /&gt;
        &lt;/div&gt;
        &lt;div id=&quot;result&quot;&gt;
            &lt;div class=&quot;PaginationContainer&quot;&gt;
            &lt;/div&gt;
            &lt;br style=&quot;clear: both;&quot; /&gt;
            &lt;div id=&quot;Container&quot;&gt;
            &lt;/div&gt;
            &lt;textarea id=&quot;template&quot; style=&quot;display: none&quot;&gt;
                &lt;table&gt;
                    &lt;tr&gt;
                        &lt;th&gt;
                        &lt;/th&gt;
                        &lt;th&gt;
                        &lt;/th&gt;
                        &lt;th style=&quot;width: 400px;&quot;&gt;
                            Name
                        &lt;/th&gt;
                        &lt;th&gt;
                            DVD Available
                        &lt;/th&gt;
                    &lt;/tr&gt;
                    {#foreach $T as d}
                    &lt;tr class=&quot;{#cycle values=[&#39;odd&#39;,&#39;even&#39;]}&quot;&gt;
                        &lt;td&gt;
                            {$T.d$index + 1}
                        &lt;/td&gt;
                        &lt;td&gt;
                            &lt;img style=&quot;height: 75px;&quot; src=&quot;{$T.d.__metadata.media_src}&quot; /&gt;
                        &lt;/td&gt;
                        &lt;td&gt;
                            {$T.d.Name}
                        &lt;/td&gt;
                        &lt;td&gt;
                            {$T.d.Dvd.Available ? &#39;Y&#39; : &#39;N&#39;}
                        &lt;/td&gt;
                    &lt;/tr&gt;
                    {#/for}
                &lt;/table&gt;
            &lt;/textarea&gt;
            &lt;div class=&quot;PaginationContainer&quot;&gt;
            &lt;/div&gt;
            &lt;br style=&quot;clear: both;&quot; /&gt;
        &lt;/div&gt;
    </pre>
</asp:Content>
